<!--<template>-->
<!--    <div class="app-container">-->
<!--        <div class="pageTitle">-->
<!--            <div class="pageTitleSub">-->
<!--                <el-form ref="queryForm" :model="queryParams" label-width="100px" size="small">-->
<!--                    <el-row :gutter="5">-->
<!--                        <el-col :span="6">-->
<!--                            <el-form-item label="车牌号" prop="Plate_no">-->
<!--                                <el-input v-model="queryParams.Plate_no" placeholder="请输入车牌号" clearable />-->
<!--                            </el-form-item>-->
<!--                        </el-col>-->

<!--                        <el-col :span="6">-->
<!--                            <el-form-item label="检测站点" prop="name">-->
<!--                                <crossing-select v-model="crossing_arr" />-->
<!--                            </el-form-item>-->
<!--                        </el-col>-->
<!--                        <el-col :span="6">-->
<!--                            <el-form-item label="开始时间" prop="Pass_time1">-->
<!--                                <el-date-picker-->
<!--                                    v-model="queryParams.Pass_time1"-->
<!--                                    format="yyyy-MM-dd HH:mm:ss"-->
<!--                                    value-format="yyyy-MM-dd HH:mm:ss"-->
<!--                                    type="datetime"-->
<!--                                    placeholder="选择日期时间" />-->
<!--                            </el-form-item>-->
<!--                        </el-col>-->
<!--                        <el-col :span="6">-->
<!--                            <el-form-item label="截至时间" prop="Pass_time2">-->
<!--                                <el-date-picker-->
<!--                                    v-model="queryParams.Pass_time2"-->
<!--                                    format="yyyy-MM-dd HH:mm:ss"-->
<!--                                    value-format="yyyy-MM-dd HH:mm:ss"-->
<!--                                    type="datetime"-->
<!--                                    placeholder="选择日期时间" />-->
<!--                            </el-form-item>-->
<!--                        </el-col>-->
<!--                        <el-col :span="6">-->
<!--                            <el-form-item label="总重范围">-->
<!--                                <div style="display: flex;">-->
<!--                                    <el-input v-model="queryParams.Vehicle_weight" :controls="false" style="flex: 1;" placeholder="" clearable />-->
<!--                                    <span style="width: 20px; text-align: center;">-</span>-->
<!--                                    <el-input v-model="queryParams.Vehicle_weight1" :controls="false" style="flex: 1;" placeholder="" clearable />-->
<!--                                </div>-->
<!--                            </el-form-item>-->
<!--                        </el-col>-->
<!--                        <el-col :span="6">-->
<!--                            <el-form-item label="超限率范围">-->
<!--                                <div style="display: flex;">-->
<!--                                    <el-input v-model="queryParams.Over_rate" :controls="false" style="flex: 1;" placeholder="" clearable />-->
<!--                                    <span style="width: 20px; text-align: center;">-</span>-->
<!--                                    <el-input v-model="queryParams.Over_rate1" :controls="false" style="flex: 1;" placeholder="" clearable />-->
<!--                                </div>-->
<!--                            </el-form-item>-->
<!--                        </el-col>-->
<!--                        <el-col :span="6">-->
<!--                            <el-form-item label="车辆轴数" prop="Axle_num">-->
<!--                                <dict-select v-model="queryParams.Axle_num" dict="dict_axle_num" />-->
<!--                            </el-form-item>-->
<!--                        </el-col>-->
<!--                        <el-col :span="6">-->
<!--                            <el-form-item label="车辆归属地" prop="plate_select">-->
<!--                                <dict-select v-model="queryParams.plate_select" dict="dict_plate_select" />-->
<!--                            </el-form-item>-->
<!--                        </el-col>-->
<!--                    </el-row>-->
<!--                </el-form>-->
<!--            </div>-->

<!--            <div class="pageBtn">-->
<!--                <el-button size="small" type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>-->
<!--                <el-button size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>-->
<!--                <el-button size="small" icon="el-icon-refresh" @click="download">无牌车辆图片下载</el-button>-->
<!--                <el-button size="small" icon="el-sidebar-external-link" @click="PlacedCaseSummaryTable">超限信息</el-button>-->
<!--            </div>-->
<!--        </div>-->

<!--        <page-main>-->
<!--            <el-table ref="orderTable" v-loading="isLoading" class="actionTable" stripe :data="tableData"-->
<!--                      header-cell-class-name="table-header" style="width: 100%;" border :row-class-name="tableRowClassName">-->
<!--                <el-table-column label="车牌号码" width="100" prop="plate_no" />-->
<!--                <el-table-column label="检测站点" width="180" prop="name" />-->
<!--                <el-table-column label="车牌颜色" width="100" prop="plate_color_name" />-->
<!--                <el-table-column label="车辆轴数" width="100" prop="axle_num" />-->

<!--                <el-table-column label="过车时间" width="200">-->
<!--                    <template slot-scope="scope">-->
<!--                        {{ moment(scope.row.pass_time).format('YYYY-MM-DD HH:mm:ss') }}-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column label="车辆限重（吨）" width="150" prop="limit_weight" />-->
<!--                <el-table-column label="车辆重量（吨）" width="150" prop="vehicle_weight" />-->
<!--                <el-table-column label="超重（吨）" width="100" prop="over_weight" />-->
<!--                &lt;!&ndash;                <el-table-column label="超限率" style="width: 120px; background-color: red;" prop="over_rate" />&ndash;&gt;-->
<!--                <el-table-column prop="over_rate" label="超限率">-->
<!--                    <template scope="scope">-->
<!--                        <span v-if="scope.row.over_rate!='0'" style="color: red;">{{ scope.row.over_rate }}</span>-->
<!--                        <span v-else>{{ scope.row.over_rate }}</span>-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column label="车长" width="100" prop="vehicle_len" />-->
<!--                <el-table-column label="车宽" width="100" prop="vehicle_width" />-->
<!--                <el-table-column label="车高" width="100" prop="vehicle_heigth" />-->
<!--                <el-table-column label="车道" width="100" prop="lane_no" />-->
<!--                <el-table-column label="方向" width="100" prop="directionName" />-->
<!--                <el-table-column label="操作" width="120" fixed="right" align="center">-->
<!--                    <template slot-scope="scope">-->
<!--                        <el-button size="small" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看详情</el-button>-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--            </el-table>-->

<!--            <div class="Pagination">-->
<!--                <el-pagination-->
<!--                    background-->
<!--                    layout="total, sizes,prev, pager, next,jumper"-->
<!--                    :current-page.sync="queryParams.CurrentPage"-->
<!--                    :page-size="20"-->
<!--                    :page-sizes="[20]"-->
<!--                    :total="totalCount"-->
<!--                    @current-change="handleCurrentChange" />-->
<!--            </div>-->
<!--        </page-main>-->

<!--        <vehicle-detail ref="vehicle-detail" :init-detail-data="detailData" />-->
<!--        <el-dialog-->
<!--            :title="wenzi"-->
<!--            :visible.sync="dialogVisible"-->
<!--            top="50px"-->
<!--            center="true"-->
<!--            width="80%">-->
<!--            <iframe :src="src"-->
<!--                    style="width: 100%; min-height: 600px;" />-->
<!--        </el-dialog>-->
<!--    </div>-->
<!--</template>-->

<!--<script>-->
<!--import moment from 'moment';-->

<!--import CrossingSelect from '@/modules/components/CrossingSelect';-->
<!--import DictSelect from '@/modules/components/DictSelect';-->
<!--import VehicleDetail from '@/modules/components/VehicleDetail';-->

<!--import {GetCount, GetOverrunCaseInformation} from '@/api/informationApi';-->
<!--import {PlacedCaseSummaryTable, UnlicensedVehicles} from '@/api/overrunPenaltyApi';-->

<!--export default {-->
<!--    name: 'overrun-case',-->
<!--    components: {-->
<!--        CrossingSelect, DictSelect, VehicleDetail-->
<!--    },-->
<!--    props: {},-->
<!--    data() {-->
<!--        return {-->
<!--            dialogVisible: false,-->
<!--            wenzi: '',-->
<!--            crossing_arr: [],-->
<!--            queryParams: {-->
<!--                Plate_no: '',-->
<!--                Vehicle_weight: '',-->
<!--                Vehicle_weight1: '',-->
<!--                Over_rate: '',-->
<!--                Over_rate1: '',-->
<!--                Axle_num: '',-->
<!--                plate_select: '',-->
<!--                Crossing_id: '',-->
<!--                Pass_time1: moment().subtract(1, 'hour').format('YYYY-MM-DD HH:mm:ss'),-->
<!--                Pass_time2: moment().format('YYYY-MM-DD HH:mm:ss'),-->
<!--                CurrentPage: 1,-->
<!--                Brandless: 2-->
<!--            },-->
<!--            isLoading: false,-->
<!--            tableData: [],-->
<!--            totalCount: 0,-->
<!--            detailData: {}-->
<!--        };-->
<!--    },-->
<!--    created() {-->

<!--    },-->
<!--    mounted() {-->
<!--        Promise.all([-->
<!--            this.TotalGetCount(),-->
<!--            this.loadRemoteData()-->
<!--        ]).then(res => {-->
<!--            console.log(res);-->
<!--            setTimeout(() => {-->
<!--                this.hideLoading();// 延时结束loading-->
<!--            }, 800);-->
<!--        });-->
<!--    },-->
<!--    methods: {-->
<!--        tableRowClassName({row, rowIndex}) {-->
<!--            if (this.$refs['vehicle-detail'] && this.$refs['vehicle-detail'].outerVisible && row == this.detailData) {-->
<!--                return 'selected-row';-->
<!--            }-->
<!--            return '';-->
<!--        },-->
<!--        moment,-->
<!--        handleQuery() {-->
<!--            Promise.all([-->
<!--                this.TotalGetCount(),-->
<!--                this.loadRemoteData()-->
<!--            ]).then(res => {-->
<!--                console.log(res);-->
<!--                setTimeout(() => {-->
<!--                    this.hideLoading();// 延时结束loading-->
<!--                }, 800);-->
<!--            });-->
<!--        },-->
<!--        resetQuery() {-->
<!--            this.$refs['queryForm'].resetFields();-->
<!--            this.queryParams.Vehicle_weight = '';-->
<!--            this.queryParams.Vehicle_weight1 = '';-->
<!--            this.queryParams.Over_rate = '';-->
<!--            this.queryParams.Over_rate1 = '';-->
<!--            this.crossing_arr = [];-->
<!--            Promise.all([-->
<!--                this.TotalGetCount(),-->
<!--                this.loadRemoteData()-->
<!--            ]).then(res => {-->
<!--                console.log(res);-->
<!--                setTimeout(() => {-->
<!--                    this.hideLoading();// 延时结束loading-->
<!--                }, 800);-->
<!--            });-->
<!--        },-->
<!--        handleCurrentChange(val) {-->
<!--            this.queryParams.CurrentPage = val;-->
<!--            this.loadRemoteData();-->
<!--        },-->
<!--        download() {-->

<!--            this.queryParams.Crossing_id = this.crossing_arr.join(',');-->
<!--            if (!this.queryParams.Pass_time1) {-->
<!--                this.queryParams.Pass_time1 = '';-->
<!--            }-->
<!--            if (!this.queryParams.Pass_time2) {-->
<!--                this.queryParams.Pass_time2 = '';-->
<!--            }-->
<!--            // this.queryParams = {'LoginName': this.$store.state.user.account,-->
<!--            //     "AutoLogin": this.$store.state.user.token,-->
<!--            //     "Crossing_id": '5',-->
<!--            //     "Vehicle_weight": '0',-->
<!--            //     "Vehicle_weight1": '50',-->
<!--            //     "Over_rate": '14.8',-->
<!--            //     "Over_rate1": '14.82',-->
<!--            //     "Pass_time1": '2020-10-12 07:17:20',-->
<!--            //     "Pass_time2": '2020-10-12 07:19:20',-->
<!--            //     "Axle_num": '4'-->
<!--            // };-->

<!--            UnlicensedVehicles(this.queryParams).then(res => {-->
<!--                this.$message({-->
<!--                    message: res.res.InquiryEvidenceAudit,-->
<!--                    type: 'warning'-->
<!--                });-->
<!--            }).catch(res => {-->
<!--                if (res.type === 'application/json' || res.type === 'text/html') {-->
<!--                    const reader = new FileReader();-->
<!--                    reader.readAsText(res, 'utf-8');-->
<!--                    reader.onload = () => {-->
<!--                        let msg = JSON.parse(reader.result);-->
<!--                        this.$message({-->
<!--                            message: msg.res.InquiryEvidenceAudit,-->
<!--                            type: 'warning'-->
<!--                        });-->
<!--                    };-->
<!--                } else {-->
<!--                    const fileName = '无牌车辆图片.zip';-->
<!--                    const elink = document.createElement('a');-->
<!--                    elink.download = fileName;-->
<!--                    elink.style.display = 'none';-->
<!--                    elink.href = window.URL.createObjectURL(res);-->
<!--                    document.body.appendChild(elink);-->
<!--                    elink.click();-->
<!--                    URL.revokeObjectURL(elink.href); // 释放URL 对象-->
<!--                    document.body.removeChild(elink);-->
<!--                }-->

<!--            });-->

<!--        },-->
<!--        PlacedCaseSummaryTable() {-->
<!--            this.wenzi = '超限信息';-->
<!--            this.queryParams.Table = 4;-->
<!--            this.queryParams.Crossing_id = this.crossing_arr.join(',');-->
<!--            if (!this.queryParams.Pass_time1) {-->
<!--                this.queryParams.Pass_time1 = '';-->
<!--            }-->
<!--            if (!this.queryParams.Pass_time2) {-->
<!--                this.queryParams.Pass_time2 = '';-->
<!--            }-->
<!--            PlacedCaseSummaryTable(this.queryParams).then(res => {-->
<!--                console.log(res.res.PlacedCaseSummaryTable);-->
<!--                this.src = res.res.PlacedCaseSummaryTable;-->
<!--                this.dialogVisible = true;-->
<!--            }).catch(err => {-->
<!--                console.log(err);-->
<!--                this.$message({-->
<!--                    message: '统计失败！',-->
<!--                    type: 'error'-->
<!--                });-->
<!--            });-->
<!--        },-->
<!--        loadRemoteData() {-->
<!--            this.isLoading = true;-->
<!--            this.queryParams.Crossing_id = this.crossing_arr.join(',');-->
<!--            if (!this.queryParams.Pass_time1) {-->
<!--                this.queryParams.Pass_time1 = '';-->
<!--            }-->
<!--            if (!this.queryParams.Pass_time2) {-->
<!--                this.queryParams.Pass_time2 = '';-->
<!--            }-->
<!--            GetOverrunCaseInformation(this.queryParams).then(res => {-->
<!--                this.isLoading = false;-->
<!--                console.log(res);-->
<!--                this.tableData = res.res.PreVehicleInformation;-->
<!--                // if (this.tableData && this.tableData.length > 0) {-->
<!--                //     this.totalCount = this.tableData[0].totalCount;-->
<!--                // } else {-->
<!--                //     this.totalCount = 0;-->
<!--                // }-->
<!--            }).catch(err => {-->
<!--                this.isLoading = false;-->
<!--                console.log(err);-->
<!--            });-->
<!--        },-->
<!--        TotalGetCount() {-->
<!--            this.queryParams.Crossing_id = this.crossing_arr.join(',');-->
<!--            if (!this.queryParams.Pass_time1) {-->
<!--                this.queryParams.Pass_time1 = '';-->
<!--            }-->
<!--            if (!this.queryParams.Pass_time2) {-->
<!--                this.queryParams.Pass_time2 = '';-->
<!--            }-->
<!--            GetCount(this.queryParams).then(res => {-->
<!--                console.log(res);-->
<!--                this.totalCount = res.res.GetCount;-->
<!--            }).catch(err => {-->
<!--                this.isLoading = false;-->
<!--                console.log(err);-->
<!--            });-->
<!--        },-->
<!--        handleView(item) {-->
<!--            this.detailData = item;-->
<!--            this.$refs['vehicle-detail'].show();-->
<!--        }-->
<!--    }-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->

<!--.table-header {-->
<!--    background-color: #f8f8f8 !important;-->
<!--}-->
<!--/deep/-->
<!--.el-table td {-->
<!--    padding: 5px 0 !important;-->
<!--}-->
<!--/deep/-->
<!--.el-button&#45;&#45;text {-->
<!--    padding: 7px 0;-->
<!--}-->
<!--</style>-->
